Web Sites ДШ ПР; 


Web Site : It is one web page or more linked together under a certain name , it 
has a web address in the internet , we can visit it through computer . 


Web Page : It is an electronic file publish in the internet and we can show it 
through browser . 


Home Page 5 It is the main page of a web site that we can through it navigate 
the web site using the browser . 


Elements of the web page : 


]- Texts 

2- Images 
3- Videos 
4- Hyperlink 


Static Web Pages : 


A page prepared by the page designer to introduce information for the visitors 
without the ability to edit any of its information from the users , It use HTML 
commands for its design . 


Dynamic or Interactive web pages : 


Page to deal or interact with users and ask them to enter a require data to get the 
information that they want , It use HTML and java script for its design . 


Creation & designing web page stages : 


1- A plan for web page shape . 
Design pages for the web site . 
Prepare the web pages . 

Run the Web pages . 
Publish the site on the internet . 


Planing 


Publishing 


Stage 1 : Planing the web site 


+ In this we make a simple sketch graph on the paper include web pages (Main 
page and web pages that connected with it ) . 

* Select data and information that we want to put it in the web pages as а 
service introduced through the site . 


Main page 


About Photos Vision & 
School Album mission 


Stage 2 : Designing web pages 


+ In this stage we design a shape for the main page and web pages . 

+ Select setups for the web pages as background color , font( size , color , 
type) , places where we want to put( texts , images , videos) . 

+ Select hyperlink inside the main page and other web pages . 


Stage 3 : Preparing 
This stage include many important steps 


+ Through word program we can setup the texts and save it as a file inside a 
certain folder to use it inside the web pages . 
+ Prepare sounds and videos files and put it inside the same folder . 


Stage 4 : Designing 


+ The stage that we convert the paper sketch into a web page design that we can 
show it through one of the browser programs . 

+ Add data (Texts , Sounds , Videos , )to the web pages . 

+ Create a hyperlink between web pages to enable us to move between the web 
pages and all this we can do using HTML commands . 


Stage 5 : Publish the site on the internet 


In this stage we reserve web address on one of the sever devices to publish our web 
site on the internet . 


About school 
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Define : 
1- Web Site : 


Complete : 


1- The elements of the web page are .............. — ; 


It is an electronic file publish in the internet and 
we can show it through browser . 

It is one web page or more linked together under 
a certain name , it has a web address 1n the internet , we can visit it 
through computer . 


Re-Arrange : 


) Design pages for the web site . 
) Publish the site on the internet . 
) Prepare the web pages . 

) A plan for web page shape . 
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There are a lot of programs that deal with sound files & enable user to 
create & process sound files using tools . 


Create Sound File : 


We can create sound file contain sound clips that we need and add on it 
different effects , then save the sound inside a file by using one of the 
processing sound programs . 


Stage 1 : Preparing 


- Collect data that we will use it by recording it . 
- Make sure that the programe is installed on your computer . 
- Make sure that Mic & Speaker are connected to your computer . 


Stage 2 : Execution 


Use Audacity program that is one of the open source program & can run 
on (windows & Linux) to create & process sound file 
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- To start recording 
we collect using MIC 


press on Record button & record the data that 


-To end recording press Stop button . 
-To listen to the sound that you record press Play button . 
Stage 3 : Editing 


After listening to the sound that we record may be we need to add effects 
on it or delete or cut any part of the sound clip and paste it in other place 
in the sound clip . 


Ф To add effect on sound clip 


Select sound clip that you want to add effect on it . 


From Effect menu choose one of the effects that required. 
Then replay the sound and listen to it after adding the effect . 


**- To cut and paste sound clip 

- Select the sound clip that you want to move and from the edit menu, 
select cut , then paste it on the required place using edit menu , then 
select Paste . 


Ф To delete a part from sound clip 


Select the part of sound that we want to delete , then click delete button 
on the keyboard . 


Stage 4 : Export sound file 


- From file menu , select export audio . 
- Choose suitable extension . 
- Save sound file inside a folder . 


Extension Types : 


There are different types of sound files extensions such as МРЗ, WAN, 
They different in sound quality and its storage space . 


We choose the suitable extension according to our needs . 


Sound file that has an extension (. WAV) is more clear and high quality , 
but its storage space is high so it isn't suitable for publishing on the 
internet . 


Sound file that has an extension (.MP3) is low quality than WAV file but 
mp3 file has less storage space so it is suitable for publishing on the 
internet . 


Work Sheet 


Complete : 


]- Stages of creating sound file are : 


2- From sound extensions types ................. AUNT 
3- Extensions different in its 
is one of the open source processing programs that 
used to edit sound fil 


Put (N) or (x) : 


1- Mp3 extension is more clearance than WAV extension. 

2- We use Mp3 extension to publish sound file on the internet. 

3- Audacity program is closed source program. 

4- We can't make any processing such as (cut-delete-copy-....) on any 
sound file. ( ) 


Creating & Processing Video Files 


Creating and processing video programs is the programs that enable users 
to create and edit video files easily and quickly using many tools and 
effects that help them. 


To create one of the video files that contain a group of photos or to 
process video scenes that we recorded before through video camera or 
web camera , we must use program that enable us to cut this video into 
many shots. 


When we put this shots after each others squently and move it quickly , 
we can see our video and we can edit or process this shots using open 
shot program that is open source , it run through windows & linux . 


Open shot video editor is a program used to create a processed video 
that enable users to produce video files with high quality from some 
images, backgrounds, texts and sound clips then adding effects to it . 


This program has an easy GUI . 
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Main Toolbar. 

Project Files. 

Function Tab (To move between project files — Image files - Sound 
files). 

Preview windows. 

Edit Toolbar. 


Zoom Slider. 
Play Ruler. 
Timeline. 
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l- Ruler 

2- Play head (Read playing clip in the time line to appear in the preview 
window) 

3- Playing clip that may be Image, Sound or video shot 

4- Tracks (It is as layers where we put image, sound or video shot on the 
track & we can use unlimited tracks in our project & we should notice 
that upper track read first and so on . 


l- Import images files inside the program 

2- Arrange images on the time line of the program 
3- Import sound file inside the program 

4- Preview the video 


Click on + button on 
the main toolbar, then 
add the image or from 
file menu select import 
files, then it will appear 
in the project file. 


To make a video clip , we put the image on the time line & arrange it by 
drag & drop images that we save in project files, then put each image on 
its special track and arrange it according to what we want to appear first. 


When we put all images we will find that our video clip appears in the 
preview window. 
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To create a video file : 


1- Import files (images & videos) 
2- Arrange clips (images & sounds) on the time line 


. 3- Preview the video 
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1- You can add track by clicking on a button + on the Edit toolbar 


2- We can re arrange video clips by (drag & drop) and arrange them 
according to first appear. 

3- Select the starting of sound file by putting it in its position on the 
time line. 


Save project : 


When we make a video clip we use images, texts, sound clips & 
effects so we should save them all in one folder to enable us to return 
any time to our video to edit or delete or cut. 


From main toolbar select file then select Save Project As 
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When we save our project in open shot that is installed 
in windows we will find that the saved program is 
undefined so right click on the file, choose properties, 
change, more options, then select look for another app 
on this PC, then select association 
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Editing video clips: 


After preview your video you may find that time line for 
the sound is longer than time line of the images. 


Project Files Iransitions 
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So we can control and reduce the time line of sound to the end with the 


time line of image using play head pointer. 


Move the pointer by drag & drop until it reach to the place where the 
image time line end. 


Stop your mouse on the sound track, then press right click and select slice 
clip, then keep left slide. 


We will find that the video clip cuts into two slices (left slice & right 
slice). 
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Drag and drop the effect to the video clip, then preview the video to see 
the effect. 


Notes 


We can know the effect symbol that we put on the video clip 


00:00:00: 11 | Effect symbol 


Track 4 


We can know also the name of the effect that we use. 


Name of effect 
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Drag & drop the transition to the video clip and see the effect 


put transition at start or at end of the clip. 


Control the time line of the transition show by click and move to increase 
or decrease it. 


- Select texts that you want to add it to the video 

- Select places that you want to add text to (At start of the video — 
between video shots — At the end of the video). 

- From title menu, select title. 


1- select a template 

2- Change font 

3- Change text color 

4- Change 
background color 

5- Save the text ina 
file 


We can add text at the start of the video or at the end of the video. 


Add a track to put the text on it 


Re-arrange video clips (text — image — sound) on tracks according to what 
we want to appear first. 
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Export video to a suitable extension: 


Press export video button Ф) from the main toolbar or from file menu 
select export video. 


The save window appear and ask you to 


enter file name 

folder path on your computer 

choose suitable extension (high quality or low quality or medium) 
press export video. 


Simple Advanced 
Select a Profile to start: 


Profile All Formats 


Select from the following options: 
Target MPS (h.264) 
Video Profile: HDV 720 24р 


High 


Video files extension types: 


There are many extensions for videos such as (MP4, AVI, ...... ). 


Work Sheet 


Complete : 


The program GUI consists of: 


Re-Arrange to save project 


( ) Save project file inside project folder. 


( ) Save project file (give it a name) from Main Toolbar , select File, then save 
Project As. 


( )Create folder for the project (give it a name) on one of the storage devices. 


( )Putall files (image — sound - ) that we will use to create video inside 
project folder. 


creating Web Pages using HTML 


HTML (hyper text markup language): 


Is a code used to create static web pages that we can show it through one 
of the browser programs. 


HTML Rules: 


We can use one of the text editors such as word pad or note pad to 
write HTML code. 

We write HTML code between this two brackets < >. 

Each tag has start< > and end </ >. 

Save text file with extension (.html). 

Open saved file using one of the web browser programs to show the 
result. 

It is not required to write HTML tags with capital letters or small 
letters. 

Each tag has attribute and value. 


Structure of creating 
web page using Speers 
HTML: <head> 


. «title» the title </title> 
HTML code consists of < ет 


two main parts: <body> 


Head: the place where we effet 
write the address of the </html> 
page. 

Body: the place where we 

write the content of the 

web page. 


Add title to the web page: using <title> </title>. 


Open the file after saving it ( .html) to show the result on the browser. 


Add content to the web page : 


This content may be (Text, image , video, hyperlink, ....). 


To change web page content direction from right to left or from left to 
right we use dir. 


Attribute Its effect 
rtl Web page content from right to left 


ltr Web page content from left to right 


<html> 

<head> 

<title> the title </title> 
</head> 

<body dir="rtl"> 


</body> 
</html> 


Web page setup: 


1- Write in new line using <br>. 
2- Centering the text using <center> </center>. 
3- Add spaces between words using &nbsp. 


4- Font setup using <font> </font>. 
Attribute | Its function 


face Font type 


color Font color 


size Font size 


5- Font setup <u> </a> , <i>.....</1> , <b>.....</b>. 

Attribute | Its function 
<u> Underline 
<b> bold 
<i> italic 


<html> 

<head> 

<title> </title> 

</head> 

<body dir="rtl"> 

<font face="time new roman" color="red" size="12"> 
Ress sepan E E 

</font> 

<center> а </center> 


</html> 
Select background color: 
We can select color for background using bgcolor 


<html> 
<head> 
</head> 


<body bgcolor-"green" > 


</body> 
</html> 


Select background image : 


We can make background image for web page by saving an image (.jpg), 
then use this code inside html code «body background="image1.jpg" >. 
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Insert image inside the web page: 


We can insert image using tag <img> and its attribute is src, then write 
the name and extension of the image. 


<html> 

<head> 

</head> 

<body> 

<img src="school.jpg"> 
</body> 

</html> 


Control image sizes : 


We can control that using tag <img> and its attribute is height="...." & 
width="...." . we use pixel in our measurement. 


<html> 

<head> 

</head> 

<body> 

<img src="school.jpg" height="300" width="300"> 
</body> 

</html>| 


Align image inside the web page: 


We can align image using tag <img> ,its attribute is Align & its value is 
(right, left, bottom, top or middle). 


value Function 

Right Align image at the right of web page 
Left Align image at the left of web page 
Middle | Align text in the middle of the image 
Bottom | Align text at the bottom of the image 
Top Align text at the top of the image 


<html> 
<head> 
</head> 
<body> 
<img src-"school.jpg" align="middle"> uud E 
</body> 

</html> 
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Insert sound in the web page: 


We can insert sound as web page background & listen to it when our web 
page loading using <bgsound> tag & its attribute is src & its value is the 
(name-extension .MP3) of the sound that we save in the folder of the web 
page content. 


<html> 
<head> 
</head> 
<body> 


<bgsound src="school.mp3"> 
</body> 
</html> 


Internet explorer is the only browser that support execution of the tag 
<bgsound>. 


Insert video inside the web page: 


We can do this using tag <embed>, its attribute is src & its value is the 
name and extension of the video, but we should know that this command 
support only (.mov - .avi - .swf) extensions. 


<html> 

<head> 

</head> 

<body> 

<embed src="school.avi"> 
</body> 

</html> 


Insert hyperlink in the web page: 


Hyperlink is an image or text that is connected by an address and when 
we click on this address we will go to it, this address may be inside the 
same web page or another page inside the same site. 


Insert hyperlink: 


We can insert hyperlink using tag <a>, its attribute is href & its value is 
the address that we want to go to it. 


<a href="address that we want to go to it">image or text </a>. 


<html> 

<head> 

</head> 

<body> 

«a href="http: / /www.moe.gov.eg">Ministry of education</a> 
</body> 

</html> 


istry of education 


Insert image hyperlink: 


<html> 

<head> 

</head> 

<body> 

<a href="page.html"> <img src="image.jpg"> </a> 
</body> 

</html> 
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Choose the correct answer: 


1- HTML is 
(1) Hyper Text Markup Library 
(2) Help Table Made Layout 
(3) Hyper Text Markup Language 
2- Web page that we use HTML to design it is 
(1) Dynamic 
(2) Active 
(3) Static 
3- We use java script, PHP and HTML in web page design to convert 


(1) Dynamic 
(2) Main 
4- To insert text to the web page we write this text in 
(1) Head 
(2) Title 
(3) Body 
5- We should save HTML file with extension 
(1) .Docx 
Q) pg 
(3) .html 
6- To make the text italic in the web page we use tag 
(1) <u> 
(2) <i> 
(3) <b> 
7- 'To select background color for the web page we use 
(1) Bgoolor 
(2) Background 
(3) Color 


8- The attribute of the tag <img> is 
(1) Path 
(2) Href 
(3) Sre 
9- The tag <a> used in In the web page. 
(1) Align text 
(2) Add hyperlink 
(3) Play video 
10- To select type of the font <font> we use attribute 
(1) Fontname 
(2) Size 
(3) Face 


Match : 


1- Web site ( )fie that has electronic content publish on the 


internet & can show it through browser program 
2- Main page (  ) produce information to visitors that they can 
see it only without enable them to process its 
content 

3- Web page ( )place on the internet consists of one or more 
we pages we can visit it through an address 

4- Static page ( )the first page in the web site that we can 
through it go to other web site pages 

5- Dynamic page |( ) 11ѕ a function to move between web site 
pages 

(  )itis information page that allow visitors to 
interact with it & process it 


Put (N) or (x) : 


1- HTML used to create dynamic web pages. 
2- We use java script to convert static web pages to dynamic web 
pages. ( 
3- The first tag that we write in the code refer to that the file wrote in 
html language is <title>. ( 
4- To control the number of spaces between words we use &nbsp; ( 
( 


5- То add image to the web page we use the tag <img>. 


What each code refer to : 


<Title> My School </Title> 


creating Project My school Site 


ei, ut 


My school 
About school” PHOtO au ion& Mission 
ЕЈ 


E T 


-— 
= 
LÉI 


Vision & Mission | Photo Album | About school 


1- Main web page "My School" save as file Home.html . 
2- Web page "About School" save as file about.html . 

3- Web page "Photo Albums" save as file photo.html . 

4- Web page "vision & mission" save as file vision.html . 


Creating the main page "Home.html" 


<html> 

<head> 

<title> My school </title> 

</head> 

«body bgcolor="sky blue" dir="Itr''> 

<center> 

<font face="tahoma" color="black" size="14">My school</font> 
<br> 

<font face="andalus" color="black" size="10"> 

«a href="home.html">Main Page</a> &nbsp; &nbsp; 

«a href="about.html">About school</a> &nbsp; &nbsp; 

«a href="photo.html">Photo Album</a> &nbsp; &nbsp; 
«a href="photo.html">Vision&mission</a> &nbsp; &nbsp; 
«a href="contact.html'>Call us</a> 

<br><br> 

<img srcz"school.jpg" height="450" width="800"> 
</center> 

</body> 

</html> 


Creating the web page "About school" 
"about bd" 


About school 


history of the school 
Address: 6 october 
Telephone :01000335245 


<html> 

<head> 

<title> My school </title> 

</head> 

<body bgcolor="sky blue" dir="Itr"> 


<center> 

<font facez"tahoma" color="black" size="14"> 

About school <br> 

History of the school <br> 

School address - 6 october city <br> 
Telephone:01000335245 <br> 

Education Stages :kg,pri,prep,sec <br> 

<embed src="video.mp4" height="300" width="300"> 
<br><br> 

<a href="home.html"><img src="back.jpg" height="100" width="100"></a> 
</center> 

</body> 


</html> 


Creating the web page "Photo Album" 
"Photo.htmI" 


Photo Album 
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<html> 

<head> 

<title> My school </title> 
</head> 

<body bgcolor="sky blue"> 


<center> 

<font face="tahoma’ color="black" sizez'14^» 

Photo Album <br> 

<img src="students.jpe” height="400" width="300"> 

<img sre="teachers.jpg" height="400" width="300"> 

<img sre="yard.jpg" height="400" width="200'><br> 

<a href="home.html"><img src="back.jpe” height="100" width="100"></a> 
</center> 

</body> 

</html> 


Creating the web page "Vision & Mission" 
vision.html 


Vision & Mission 
School Vision: 
Prepare a perfect student enable to 
School Mission: 


Develop the student Skills 


<html> 

<head> 

<title> My school </title> 

</head> 

«body bgcolor="sky blue'» 

<center> 

<font face="tahoma" color="black" size="14"> 
«pVision & Mission </u> 

<br><br> 

Prepare a perfect student enable to....<br> 
Mission<br> 

Develop the student skills<br> 

<br><br> 

<a href="home.html"><img src="back.jpg" height="100" width="100"></a> 
k/center> 

</body> 

</html> 


